// 当页面加载完成之后，窗口会调用这个函数
window.onload = function() {
    // 更新一下总计
    updateZJ();
    // 当页面加载完成，我们需要绑定各种事件
    // 根据 id 获取到fruit的表格
    var fruitTbl = document.getElementById("tbl_fruit");
    // 获取表格中所有的行
    var rows = fruitTbl.rows;
    for (var i = 1; i < rows.length -1; i++) {
        var tr = rows[i];
        // 1.绑定鼠标悬浮以及离开时设置背景颜色事件
        tr.onmouseover=showBGColor;
        tr.onmouseout=clearBGColor;
        //获取tr这一行的所有单元格
        var cells = tr.cells;
        var priceTD = cells[1];
        // 2.绑定鼠标悬浮在单价单元格变手势的事件
        priceTD.onmouseover=shouwHand;
        // 3.绑定鼠标点击单价单元格的事件
        priceTD.onclick=editPrice;
    }
}

//当鼠标悬浮时，显示背景颜色
function showBGColor(){
    // event表示当前发生的事件
    // event.srcElement  : 事件源
    // alert(event.srcElement);
    // alert(event.srcElement.tagName);  -- TD

    if (event && event.srcElement && event.srcElement.tagName=="TD") {
        var td = event.srcElement;
        // td.parentElement 表示获取td的父元素  -> TR
        var tr = td.parentElement;
        // 如果想要通过js代码设置某节点的背景颜色样式,则需要加上  .style
        tr.style.backgroundColor = "yellow";
        // tr.cells 表示获取这个tr中的所有的单元格
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "red";
        }

    }
}

// 当鼠标离开时，恢复原始样式
function clearBGColor() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;  // 取td
        var tr = td.parentElement;  // 取tr
        tr.style.backgroundColor = "transparent";
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "slateblue";
        }
    }
}

// 当鼠标悬浮在单价单元格时，显示手势
function shouwHand(){
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        // cursor : 光标
        td.style.cursor = "hand";
    }
}

function editPrice(){
    if (event && event.srcElement && event.srcElement.tagName == "TD"){
        var priceTD = event.srcElement;
        //目的是判断当前的priceTD有子节点，而且第一个子节点是文本节点，TextNode对应的是 3 ElementNode对应的是 1
        if (priceTD.firstChild && priceTD.firstChild.nodeType==3){
            // innerText 表示设置或者获取当前节点的内部文本
            var oldPrice = priceTD.innerText;
            // innerHTML 表示设置当前节点的内部HTML
            priceTD.innerHTML = "<input type='text' size='4'/>";
            var input = priceTD.firstChild;
            if (input.tagName == "INPUT") {
                input.value = oldPrice;
                // 选中输入框内部的文本
                input.select();
                // 4.绑定输入框失去焦点事件，失去焦点，更新单价
                input.onblur = updatePrice;
            }
        }

    }
}

function updatePrice() {
    if (event && event.srcElement && event.srcElement.tagName == "INPUT"){
        var input = event.srcElement;
        var newPrice = input.value;
        // input 的父节点的 TD
        var priceTD = input.parentElement;
        priceTD.innerText = newPrice;

        // 更新当前行的小计这一个格子
        updateXJ(priceTD.parentElement);

    }
}

function updateXJ(tr){
    if (tr && tr.tagName == "TR"){
        var tds = tr.cells;
        var price = tds[1].innerText;
        var count = tds[2].innerText;

        // innerText 获取到的类型是字符串类型，因此需要类型转换，才能进行数学运算
        var xj = parseInt(price) * parseInt(count)
        tds[3].innerText = xj;

        // 更新一下总计
        updateZJ();
    }
}

// 更新总计
function updateZJ(){
    var fruitTbl = document.getElementById("tbl_fruit");
    var rows = fruitTbl.rows;
    var sum = 0;
    //从第一行到倒数第二行
    for (var i = 1; i < rows.length - 1; i++) {
        var tr = rows[i];
        var xj = parseInt(tr.cells[3].innerText);  // NaN  not a number 不是一个数字
        sum = sum + xj;
    }
    rows[rows.length - 1].cells[1].innerText = sum;
}